import './App.css'

import {useEffect, useState} from 'react'
import viteLogo from '/vite.svg'
import reactLogo from './assets/react.svg'

function App() {
  const [test, setTest] = useState('fasd')
  const [count, setCount] = useState(0)
  const message = 'Hello'

  useEffect(() => {
    document.title = `${message} - ${count}`
    // ❌ 缺少 count 和 message 依赖
  }, [count]) // ← 这里应报 exhaustive-deps 警告

  return (
    <>
      <div>
        <a
          href='https://vitejs.dev'
          target='_blank'
          rel='noreferrer'>
          <img
            src={viteLogo}
            className='logo'
            alt='Vite logo'
          />
        </a>
        <a
          href='https://react.dev'
          target='_blank'
          rel='noreferrer'>
          <img
            src={reactLogo}
            className='logo react'
            alt='React logo'
          />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
          {test}
        </p>
      </div>
      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
    </>
  )
}

export default App
